<template>
    <div>
        <!-- 查看博客 -->
        <el-dialog title="博客" :visible.sync="BlogVisible" width="40%">
            <el-table :data="gridData">                
                <el-table-column prop="link" label="链接" width="450">
                    <template slot-scope="scope">
                        <router-link :to="scope.row.link">{{scope.row.link}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="danger" plain size="small" @click="deleteblog(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="确认删除" :visible.sync="makesuredelete" append-to-body width="20%">
                <el-button type="danger" plain size="small" @click="makesure" class="queren">确定</el-button>
            </el-dialog>
        </el-dialog>

        <!-- 查看奖状 -->
        <el-dialog title="奖状" :visible.sync="CertificateVisible">
            <el-table
            :header-cell-style="headStyle"
            :cell-style="rowStyle"
      :data="jiangzhuangtab"
      style="width: 100%">
      <el-table-column
        prop="jiangzhuangname"
        label="项目"
        >
      </el-table-column>
      <el-table-column
        label="图片"
        >
        <template slot-scope="scope">
            <img @click="downimg()" :src="scope.row.jiangzhuangimg" alt="" style="width: 50px;height: 50px;margin-left:20px;">
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
            <el-button type="danger" plain size="small" @click="jiangshan(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        </el-dialog>

        <!-- 添加成员 -->
        <el-dialog title="添加成员" :visible.sync="addVisible" width="30%">
            <el-form label-width="80px" ref="form" v-model="form">
            <el-form-item label="姓名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-input v-model="form.cla"></el-input>
            </el-form-item>
            <el-form-item label="学号">
                <el-input v-model="form.num"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="form.contactInfo"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="等级">
                <el-input v-model="form.grade"></el-input>
            </el-form-item>
            </el-form>
            <el-button type="primary" plain size="middle" class="add" @click="register">添加</el-button> 
        </el-dialog>

        <!-- 重置密码弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="resetVisible"
            width="30%">
            <span>确认重置 {{temp.username}} 的密码吗?</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="resetpassword">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除成员弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="dememberVisible"
            width="30%">
            <span>确认删除 {{this.temp.username}} 这个成员吗?</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="deletemember">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑成员弹窗 -->
        <el-dialog title="编辑成员信息" :visible.sync="editmemberVisible" width="30%">
            <el-form label-width="80px" :model="editform" size="samll">
                <el-form-item label="姓名" >
                    <el-input v-model="editform.username"></el-input>
                </el-form-item>
                <el-form-item label="班级" >
                    <el-input v-model="editform.cla"></el-input>
                </el-form-item>
                <el-form-item label="学号" >
                    <el-input v-model="editform.num"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" >
                    <el-input v-model="editform.contactInfo"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="makesureedit">确定修改</el-button>
            </div>
        </el-dialog>

        <!-- 导表的弹窗 -->
        <el-dialog
            title="一键导入"
            :visible.sync="uploadVisible"
            width="30%">
            <input type="file" ref="file">
            <el-button @click="uploadfile">上传</el-button>
        </el-dialog>
       

        <el-table
            :data="tableData"
            border
            row-key="id"
            size="mini"
            :header-cell-style="headStyle"
            :cell-style="rowStyle"
            style="width: 100%">
            <el-table-column
                prop="username"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="hportrait"
                label="头像"
                width="120">
                <template slot-scope="scope">
                    <img  :src="scope.row.hportrait" alt="" style="width: 50px;height: 50px;margin-left:20px;">
                </template>
            </el-table-column>
            <el-table-column
                prop="cla"
                label="班级"
                width="140">
            </el-table-column>
            <el-table-column
                prop="num"
                label="学号"
                width="140">
            </el-table-column>
            <el-table-column
                prop="contactInfo"
                label="联系方式"
                width="140">
            </el-table-column>
            <el-table-column
                label="博客"
                width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="seeblog(scope.row)">查看详情</el-link>
                </template>
            </el-table-column>
            <el-table-column
                label="奖状"
                width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="getpri(scope.row)">查看详情</el-link>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                class="caozuo"
               >
                 <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="editit(scope.row)">编辑</el-button>
                    <el-button type="info" plain size="small" @click="funcresetVisible(scope.row)">重置密码</el-button>
                    <el-button type="danger" plain size="small" @click="funcdemember(scope.row)">删除</el-button>
                </template>
                
            </el-table-column>
        </el-table>
        <div class="top"><el-button type="success" @click="uploadVisible=true">导表</el-button><el-button type="info" @click="addmember">添加成员</el-button></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //表格信息
            tableData:[],
            //博客
            BlogVisible:false,
            makesuredelete:false,
            gridData:[],
            blogid:'',
            //奖状
            CertificateVisible:false,
            //添加成员
            addVisible:false,
            form:{
                username:"",
                cla:"",
                num:"",
                contactInfo:"",
                password:"",
                grade:''
            },
            //存储中途点击表格的信息
            temp:{},
            //重置密码弹窗
            resetVisible:false,
            //删除成员弹窗
            dememberVisible:false,
            //编辑成员弹窗
            editmemberVisible:false,
            editform:{
                username:'',
                cla:'',
                num:'',
                contactInfo:''
            },
            //上传文件弹窗
            uploadVisible:false,
            //奖状
            jiangzhuangtab:[],
            jiangzhuangname:[],//名字
            jiangzhuangimg:[]//图片
           
        }
    },
    methods:{
        deleteblog(row){
            this.blogid = row.id;
            this.makesuredelete=true;
            
        },
        makesure(){
            this.$axios.post('/blog/delblog',{id:this.blogid}).then(()=>{
                this.$router.go(0)
            })
            this.makesuredelete=false;
        },
        addmember(){
            this.addVisible=true;
        },
        //获取所有人
        getallpe(){
            this.$axios.post('user/findAll',{
                Headers:{Authorization:sessionStorage.getItem('token')}
            }).then((res) => {
                res.data.result.forEach(i => {
                    this.tableData.push(i);
                });
            })
        },
        //重置密码
        funcresetVisible(row){
            this.temp.id = row.id;
            this.temp.username = row.username;
            this.temp.num = row.num;
            this.resetVisible = true;
        },
        resetpassword(){
            this.$axios.post('/user/update/password',{id:this.temp.id}).then((res)=>{
                if (res.data.code == 0){
                    this.$message.success("重置密码成功");
                }
            });
            this.resetVisible = false;
        },
        //删除成员
        funcdemember(row){
            this.temp.id = row.id;
            this.temp.username = row.username;
            this.temp.num = row.num;
            this.dememberVisible = true;
        },
        deletemember(){
            this.$axios.post('/user/deleteOne',{num:this.temp.num,username:this.temp.username}).then((res)=>{
                console.log(res)
                if (res.data.code == 0){
                    console.log(sessionStorage.getItem('token'))
                    this.$message.success("删除"+this.temp.username+"成功");
                    this.$router.go(0)
                }
            })
            this.dememberVisible = false;
              
        },
        //添加（注册）成员
        register(){
            this.$axios.post('/user/register',{username:this.form.username,cla:this.form.cla,contactInfo:this.form.contactInfo,password:this.form.password,num:this.form.num,grade:this.form.grade})
            .then(()=>{  
            });
            this.addVisible = false;
            this.$router.go(0)
        },
        //编辑成员
        editit(row){
            this.editform.id = row.id;
            this.editform.username = row.username;
            this.editform.cla = row.cla;
            this.editform.num = row.num;
            this.editform.contactInfo = row.contactInfo;
            this.editmemberVisible = true;
        },
        makesureedit(){
            this.$axios.post('/user/updataMember',{
                id:this.editform.id,
                username:this.editform.username,
                cla:this.editform.cla,
                num:this.editform.num,
                contactInfo:this.editform.contactInfo
            }).then(()=>{
                this.$router.go(0);
            })
        },
        //上传文件
        uploadfile(){
            var forms = new FormData()
            var configs = { headers:{'Content-Type':'multipart/form-data'}};
            forms.append('file',this.$refs.file.files[0]);
            this.$axios.post('/excel/importexcel',forms ,configs).then(res=>{
                if(res.data.code == 0){
                    this.$router.go(0)
                }
                else{
                    this.$message.error("上传失败")
                }
            })

        } ,
        //博客
        seeblog(row){
            this.temp.id = row.id;
            this.temp.username = row.username;
            this.temp.num = row.num;
            this.$axios.post('/blog/getallblog',{Fid:this.temp.id}).then((res)=>{
                this.gridData = [];
                res.data.result.forEach(i => {
                    this.gridData.push(i);
                });
            })
            this.BlogVisible = true;
            
        },
        //居中函数
        rowStyle(){
            return "text-align:center" 
        },
        headStyle(){
            return "text-align:center"
        },
        //获得奖状图片
        async getpri(row){
            this.CertificateVisible = true;
            this.jiangzhuangtab = [];
            
            this.$axios.post('/prize/getoneallpri',{num:row.num}).then((res)=>{
                for (let i = 0;i<res.data.result.length;i++)
                {
                    let tempjiangzhuang = {};
                     this.$axios.post('/prize/getAllPic',{Fid:res.data.result[i].id}).then((e)=>{
                        tempjiangzhuang.jiangzhuangname = res.data.result[i].name;
                        tempjiangzhuang.jiangzhuangimg = e.data.result[0]
                        tempjiangzhuang.id = res.data.result[i].id
                        this.jiangzhuangtab.push(tempjiangzhuang)
                    })
                }
                
            })
            
        },
        //删除项目
        jiangshan(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/prize/delprize',{id:row.id}).then(()=>{
                this.$message.success('删除成功');
                this.$router.go(0)
            })
        })
            
        },
        //下载项目图片
        downimg(){
            console.log('下载图片')
        }
    },
    //生命周期函数
    created(){
        this.getallpe();
    }
}
</script>

<style scoped>
    .top{
        width: 50%;
        height: 40px;
        text-align: left;
        margin-top: 10px;
    }
    .add{
        position: relative;
        left: -28%;
    }
    .queren{
        position: relative;
        right: -75%;
    }
    .caozuo{
        width: 200;
    }
</style>